<template>
    <div class="white-box" style="min-height: 600px">
        <div class="proc-list">
            <!-- 货架号生成 -->
            <div class="proc-item flexs" v-for="(item, index) in steps" :key="index">
                <div class="proc-item__left">
                    <span class="proc-item__index">{{ index + 1 }}</span>
                    <span class="proc-item__text">{{ item.text }}</span>
                </div>
                <el-switch
                    v-model="item.show"
                    width="72px"
                    size="large"
                    :inactive-value="0"
                    :active-value="1"
                    inline-prompt
                    active-text="已开启"
                    inactive-text="已关闭"
                    @change="(val) => switchChange(val, index)"
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getSteps()
})

function getSteps() {
    proxy.$axios
        .get("config/orderProcess")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                steps.value[0].show = Number(result.order_shelve)
                steps.value[1].show = Number(result.order_quality)
                steps.value[2].show = Number(result.order_release)
                steps.value[3].show = Number(result.order_pack)
                steps.value[4].show = Number(result.order_delivery)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 流程
const steps = ref([
    {
        show: 0,
        text: "货架号生成",
    },
    {
        show: 0,
        text: "质检",
    },
    {
        show: 0,
        text: "放货",
    },
    {
        show: 0,
        text: "打包",
    },
    {
        show: 0,
        text: "交货",
    },
])
const switchChange = (val, index) => {
    let data = {
        order_shelve: steps.value[0].show,
        order_quality: steps.value[1].show,
        order_release: steps.value[2].show,
        order_pack: steps.value[3].show,
        order_delivery: steps.value[4].show,
    }
    switch (index) {
        case 0:
            data.order_shelve = val
            break
        case 1:
            data.order_quality = val
            break
        case 2:
            data.order_release = val
            break
        case 3:
            data.order_pack = val
            break
        default:
            data.order_delivery = val
            break
    }
    proxy.$axios
        .post("config/orderProcess", data)
        .then((res) => {
            if (res.data.code == 0) {
                proxy.$message({ message: "设置成功！", type: "success" })
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "OutboundProcess",
}
</script>

<style lang="less" scoped>
.proc-list {
    display: flex;
    align-items: center;
    margin-top: 40px;
    .proc-item {
        border-radius: @radius-lg;
        flex: 1;
        height: 80px;
        padding: 0px 12px;
        overflow: hidden;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
        margin-right: 14px;
        .proc-item__left {
            display: flex;
            align-items: center;
        }
        .proc-item__index {
            background-color: #e4efff;
            border-radius: 50%;
            color: @themes;
            display: block;
            width: 22px;
            height: 22px;
            line-height: 22px;
            font-size: @font-size-md;
            text-align: center;
            overflow: hidden;
            margin-right: 10px;
        }
        .proc-item__text {
            font-size: @font-size-lg;
            color: @gray-8;
            font-weight: bold;
        }
    }
}
</style>
